<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>姓名案例-计算属性Computed实现</title>
</head>
<body>
<div id="app">
  <p>姓：<input type="text" v-model="lastName"></p>
  <p>名：<input type="text" v-model="firstName"></p>
  <p>全名：{{fullName}}</p>
  <p>全名：{{fullName}}</p>
  <p>全名：{{fullName}}</p>
  <p>全名：{{fullName}}</p>
</div>
<script src="../js/vue.js"></script>
<script type="text/javascript">
  Vue.config.productionTip=false
  const vm=new Vue({
    el:"#app",
    data(){
      return{
        firstName:"三",
        lastName:"张1",
      }
    },
    computed:{
      //计算属性的完整写法
      // fullName:{
      //   get(){
      //     console.log("计算属性被调用了")
      //     //计算属性中的get的this指向就是vue实例
      //     console.log(this)
      //     return this.lastName+"-"+this.firstName
      //   },
      //   set(value){
      //     if (value) {
      //       const arr = value.split("-")
      //       this.lastName = arr[0]
      //       this.firstName = arr[1]
      //     }
      //   }
      // }
      //简写计算属性，一般计算属性中只需要用到get方法，这个时候可以采取简写的形式
      fullName: function(){
          console.log("计算属性被调用了")
          //计算属性中的get的this指向就是vue实例
          console.log(this)
          return this.lastName+"-"+this.firstName
        }
      }
  })
</script>
</body>
</html>
